<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('公司列表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: container-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: map-css"/>

    <style type="text/css">
        .orgchart {
            background: #fff;
        }

        .orgchart td.left, .orgchart td.right, .orgchart td.top {
            border-color: #aaa;
        }

        .orgchart td > .down {
            background-color: #aaa;
        }

        .orgchart .middle-level .title {
            background-color: #006699;
        }

        .orgchart .middle-level .content {
            border-color: #006699;
        }

        .orgchart .product-dept .title {
            background-color: #009933;
        }

        .orgchart .product-dept .content {
            border-color: #009933;
        }

        .orgchart .rd-dept .title {
            background-color: #993366;
        }

        .orgchart .rd-dept .content {
            border-color: #993366;
        }

        .orgchart .pipeline1 .title {
            background-color: #996633;
        }

        .orgchart .pipeline1 .content {
            border-color: #996633;
        }

        .orgchart .frontend1 .title {
            background-color: #cc0066;
        }

        .orgchart .frontend1 .content {
            border-color: #cc0066;
        }

        body {
            background-color: white !important;
        }
    </style>
</head>
<style>
    html, body, #treeRadial, #Radial,#demo{
        width: 100%;
        padding: 0;
        margin-top: 10px;
        /*height: 100%;*/

    }
</style>
<div class="ui-layout-west">
    <div class="box box-main">
        <div class="box-header">
            <div class="box-title">
                <i class="fa icon-grid"></i> 公司组织机构
            </div>
            <div class="box-tools pull-right">
                <a type="button" class="btn btn-box-tool" href="#" onclick="dept()" title="管理部门"><i
                        class="fa fa-edit"></i></a>
                <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                        class="fa fa-chevron-up"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                        class="fa fa-chevron-down"></i></button>
                <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                        class="fa fa-refresh"></i></button>
            </div>
        </div>
        <div class="ui-layout-content">
            <div id="tree" class="ztree"></div>
        </div>
    </div>
</div>


<div class="ui-layout-center">
    <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="user-form">
                    <input type="hidden" id="ComPidorDepTid" name="ComPidorDepTid">
                    <div class="select-list">

                        <ul>
                            <li>
                                图表类型：<select id="type" onchange="switchChart()">
                                <option value="0">默认</option>
                                <option value="1">树形圆状</option>
                                <!--<option value="2">demo</option>-->
                            </select>
                            </li>
                            <li>
                                <input type="hidden" id="compID">
                            </li>
                        </ul>

                    </div>
                </form>
            </div>

            <div id="org">
                <div id="chart-container">

                </div>
                <canvas id="map"></canvas>

            </div>

            <div id="treeRadial">
                <!--<div id="Radial"></div>-->
            </div>
            <!--<div id="demo">-->

            <!--</div>-->
        </div>

    </div>


</div>

<th:block th:include="include :: pagemap-js"/>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: ztree-js"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: container-js"/>
<th:block th:include="include :: tree-radial-js"/>
<th:block th:include="include :: qunee-min-js"/>



<script th:inline="javascript">

    pagemap(document.querySelector('#map'));

    var editFlag = [[${@permission.hasPermi('hr:company:edit')}]];
    var detailFlag = [[${@permission.hasPermi('hr:company:detail')}]];
    var prefix = ctx + "company";

    $(function () {

        var panehHidden = false;
        if ($(this).width() < 800) {
            panehHidden = true;
        }
        //$('body').layout({initClosed: panehHidden, west__size: 350});
        switchChart();
        queryCompanyTree();
    });

    /**
     * 默认orgs
     * @param data
     */
    function findAllTree(data) {
        var oc = $('#chart-container').orgchart({
            'data': data,
            'nodeTitle': 'name',
            'nodeContent': 'title',
            'toggleSiblingsResp': false,
            'direction': 't2b',



        });
        oc.$chart.find('.node').on('click', function () {
            $.operate.PersonList($(this).children('.content').text(), $(this).children('.title').text());
        });
        oc.$chart.find('.content').css('display', 'none');
        oc.$chart.find('.edge').remove();
    }

    /**
     * 原状图
     * @param data
     */
    function treeradial(data) {
        require([
            'echarts'
            // 'echarts/chart/tree',
            // 'echarts/component/tooltip'
        ], function (echarts) {

            chart = echarts.init(document.getElementById('Radial'), null, {});

            window.onresize = function () {
                chart.resize();
            };

            chart.setOption({

                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'tree',
                        data: [data],
                        top: '18%',
                        bottom: '14%',
                        roam: true,
                        layout: 'radial',
                        symbol: 'emptyCircle',
                        symbolSize: 7,
                        initialTreeDepth: 3,
                        animationDurationUpdate: 750,
                        expandAndCollapse: false
                    }
                ]
            });
            chart.on('click', function (params) {
                $.operate.PersonList(params.data.value, params.data.name);
            });
        });
    };

    /**
     * 读取左侧树形菜单
     */
    function queryCompanyTree() {
        var url = ctx + "orgs/treeData?type=comp";
        var options = {
            url: url,
            expandLevel: 2,
            onClick: zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            if (treeNode.id > 30000) {
                $.modal.msgWarning('请选择公司名称')
                return;
            }
            $("#compID").val(treeNode.id);
            switchChart();
        }
    }

    /**
     * 获取json数据
     * @param compID
     */
    function getJsonData(compID) {
        var jsonData = "";
        $.ajax({
            //请求方式
            type: "GET",
            //请求的媒体类型
            contentType: "application/json;charset=UTF-8",
            //请求地址
            url: "orgs/findAllTree?type=dep",
            async: false,
            data: {
                "compID": compID
            },
            //请求成功
            success: function (result) {
                jsonData = result;
            },
            //请求失败，包含具体的错误信息
            error: function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
        return jsonData;
    }

    /**
     * 切换
     */
    function switchChart() {
        removeAll();

        type = $("#type").val();
        compID = $("#compID").val();
        jsonData = getJsonData(compID);
        jsonstr=JSON.stringify(jsonData);
        jsarr=JSON.parse(jsonstr);
        if (type == 0) {
            $('#org').append('<div id="chart-container"></div>');
            findAllTree(jsonData);


        } else if (type == 1) {
            $('#treeRadial').append('<div id="Radial"></div>');

            treeradial(jsonData);

        }


    }

    /**
     * 每一次切换先清除所有，在根据选择的类型重新展示
     */
    function removeAll() {
        $('#Radial').remove();
        $('#chart-container').remove();

    }


</script>

</body>
</html>